<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="m1280 f f-j-b center">
			<div class="lefBox">
				<div class="title">
					<div v-if="obj.kcClubArticleAllRespVO" class="titTop">{{ obj.kcClubArticleAllRespVO.title }}</div>
					<div v-if="obj.kcClubArticleAllRespVO" class="time">{{ formatTimestamp(obj.kcClubArticleAllRespVO.publishTime) }}</div>
				</div>
				<div class="avaBox f f-a-c f-j-b">
					<div v-if="obj.kcClubArticleAllRespVO" class="leftIimg f f-a-c"><img :src="obj.kcClubArticleAllRespVO.avatar" alt="" />{{ obj.kcClubArticleAllRespVO.username }}</div>
					<div class="rigXin f f-a-c">
						<div v-if="obj.kcClubArticleAllRespVO" class="iconItem hand">
							<img @click="cancelCollection(obj.kcClubArticleAllRespVO)" v-if="obj.kcClubArticleAllRespVO && obj.kcClubArticleAllRespVO.favorite > 0" src="/src/assets/page/01.png" alt="" />
							<img @click="ficle(obj.kcClubArticleAllRespVO)" v-else src="/src/assets/page/1.png" alt="" />
							{{ obj.kcClubArticleAllRespVO.favoriteNum || 0 }}
						</div>
						<div v-if="obj.kcClubArticleAllRespVO" @click.stop="dwonItems" class="iconItem hand"><img src="/src/assets/page/12.png" alt="" />{{ obj.kcClubArticleAllRespVO.commentNum || 0 }}</div>
						<div v-if="obj.kcClubArticleAllRespVO" @click="copyLoca" class="iconItem hand"><img src="/src/assets/page/7.png" alt="" />Share</div>
						<div @click="report" class="iconItem hand"><img src="/src/assets/page/5.png" alt="" />Report</div>
					</div>
				</div>
				<div class="xian"></div>
				<!-- 是否加入俱乐部 -->
				<!-- <div v-if="obj.kcClubArticleAllRespVO && obj.kcClubArticleAllRespVO.isJoinClub == 0"> -->
				<!-- 是免费的 -->
				<div v-if="obj.kcClubArticleAllRespVO && obj.kcClubArticleAllRespVO.free == 1">
					<div v-if="obj.kcClubArticleAllRespVO">
						<div class="countsss" v-html="obj.kcClubArticleAllRespVO.content"></div>
					</div>
					<!-- obj.kcClubArticleAllRespVO && obj.kcClubArticleAllRespVO.isJoinArticle > 0 && obj.kcClubArticleAllRespVO.free == 2 -->
				</div>
				<div v-else class="yiBox">
					<div v-if="obj.kcClubArticleAllRespVO && (obj.kcClubArticleAllRespVO.isJoinClub == 0 || obj.kcClubArticleAllRespVO.isJoinClub == null)">
						<!-- 未购买 -->
						<div v-if="obj.kcClubArticleAllRespVO && (obj.kcClubArticleAllRespVO.isJoinArticle == 0 || obj.kcClubArticleAllRespVO.isJoinArticle == null)" class="weiBox">
							<div class="counts" v-html="obj.kcClubArticleAllRespVO.freeContent"></div>
							<div class="price f f-a-c f-j-c">
								<div class="lefCont f f-a-c f-d-c">
									<div class="read">Read the rest</div>
									<div class="contst">Continue reading for just</div>
									<div class="daola">${{ obj.kcClubArticleAllRespVO.price }}</div>
									<div @click="drawers = true" class="btns hand">Continue</div>
								</div>
								<div class="rigJoin">
									<div class="joinName">Join the club!</div>
									<div class="countss">Unlimited access and read EVERYTHINGPlus FREE first order on Xpert(free consultation)!</div>
									<div class="daolaPri">
										<span>${{ obj.kcClubPriceRespVO?.subscription }}</span>
										${{ obj.kcClubPriceRespVO?.discount }}/month
									</div>
									<div @click="drawers = true" class="botBtn hand">Get access</div>
								</div>
							</div>
						</div>
						<!-- 已购买 -->
						<div v-else class="yiBox">
							<div v-if="obj.kcClubArticleAllRespVO">
								<div class="countsss" v-html="obj.kcClubArticleAllRespVO.content"></div>
							</div>
						</div>
					</div>
					<div v-else>
						<div v-if="obj.kcClubArticleAllRespVO">
							<div class="countsss" v-html="obj.kcClubArticleAllRespVO.content"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="rigBox">
				<div class="toptit">You may also like</div>
				<div v-for="(item, index) in recommenList" @click="dwonItem(item)" :key="index" class="hand boxItem">
					<div class="img">
						<img :src="item.image" alt="" />
					</div>
					<div class="cont">{{ item.title }}</div>
					<div class="timeYarn">{{ formatTimestamp(item.publishTime) }}</div>
				</div>
			</div>
		</div>
		<el-drawer v-model="drawer" :title="viewTolal + ' response'">
			<div class="boxResp">
				<div class="xian"></div>
				<div class="sech f f-a-c f-j-b">
					<input type="text" v-model="value" placeholder="ADD a comment" class="inp" name="" id="" />
					<div @click="postArticleReview" class="btn hand">Post</div>
				</div>
				<div v-for="(item, index) in viewList" :key="index" class="neiCount">
					<div class="topImg f f-a-c f-j-b">
						<div class="leftImg f f-a-c">
							<div class="img"><img :src="item.avatar" alt="" /></div>
							<div class="name">
								<div class="nameTit">{{ item.username }}</div>
								<div style="margin-top: 5px" class="ago">{{ getTimes(item.createTime) }}</div>
							</div>
						</div>
						<div @click="articleReviewLike(item)" class="aixin f hand f-a-c">
							<img v-if="item.isComment == 0" src="/src/assets/page/1.png" alt="" />
							<img v-else src="/src/assets/page/01.png" alt="" />
							{{ item.commentNum }}
						</div>
					</div>
					<div class="countNei">
						{{ item.content }}
					</div>
				</div>
				<!-- 分页器 -->
				<div v-if="viewList && viewList.length != 0" style="margin-bottom: 80px" class="hand">
					<div class="example-pagination-block f f -a-c f-j-c">
						<el-pagination @size-change="sizeChange" :default-page-size="pageSize" @current-change="currentChange" layout="prev, pager, next" :total="viewTolal" />
					</div>
				</div>
				<div v-else>
					<el-empty description="No comment yet" />
				</div>
			</div>
		</el-drawer>

		<el-drawer v-model="drawers" title="" :direction="direction" :before-close="handleClose">
			<div class="boxResp">
				<div class="topBoxTit">Order options</div>
				<div class="xian"></div>
				<div class="read">
					<div @click="indQie(1)" class="topSetle hand f f-a-c">
						<img v-if="ind1 == 1" src="/src/assets/user/gou.png" alt="" />
						<img v-else src="/src/assets/user/weigou.png" alt="" />
						Read the rest
					</div>
					<div class="xian"></div>
					<div v-if="obj.kcClubArticleAllRespVO" class="botOn f f-a-c f-j-b">
						<div class="lefPub">One-time purchase</div>
						<div class="rigPric">${{ obj.kcClubArticleAllRespVO.price }}</div>
					</div>
				</div>
				<div class="botJoin">
					<div @click="indQie(2)" class="topSetle hand f f-a-c">
						<img v-if="ind1 == 2" src="/src/assets/user/gou.png" alt="" />
						<img v-else src="/src/assets/user/weigou.png" alt="" />
						Read the rest
					</div>
					<div class="xian"></div>
					<div class="ul">
						<div class="li f f-a-c">
							<div class="dian"></div>
							Save time & effort with automatic monthly orders
						</div>
						<div class="li f f-a-c">
							<div class="dian"></div>
							Cancel anytime
						</div>
						<div class="li f f-a-c">
							<div class="dian"></div>
							Work long-term with your seller for best results
						</div>
					</div>
					<div v-if="obj.kcClubPriceRespVO" class="setMonth">
						<div :class="{ borAct: ind2 == 1 }" @click="indsQie(1)" class="topThon hand m-b-20 f f-a-c f-j-b">
							<div class="lefPlan">1-month plan</div>
							<div class="rigmonth">${{ obj.kcClubPriceRespVO.subscription }}/month</div>
						</div>
						<div v-if="obj.kcClubPriceRespVO.discountMonths" :class="{ borAct: ind2 == 2 }" @click="indsQie(2)" class="topThon">
							<div class="hand f f-a-c f-j-b">
								<div class="lefPlan">{{ obj.kcClubPriceRespVO.discountMonths }}-month plan</div>
								<div class="rigmonth">${{ (obj.kcClubPriceRespVO.discount / obj.kcClubPriceRespVO.discountMonths).toFixed(2) }}/month</div>
							</div>
							<div
								v-if="(obj.kcClubPriceRespVO.subscription - (obj.kcClubPriceRespVO.discount / obj.kcClubPriceRespVO.discountMonths).toFixed(2)).toFixed(2) > 0"
								class="lanDao hand m-t-10 f f-a-c f-j-b">
								<div class="lefDao">
									Save ${{ (obj.kcClubPriceRespVO.subscription - (obj.kcClubPriceRespVO.discount / obj.kcClubPriceRespVO.discountMonths).toFixed(2)).toFixed(2) }}

									<!-- ({{ (((obj.kcClubPriceRespVO.discount / obj.kcClubPriceRespVO.discountMonths).toFixed(2) / obj.kcClubPriceRespVO.subscription).toFixed(2) * 10).toFixed(1) }} OFF) -->
								</div>
								<div class="rigDao">avg. per order</div>
							</div>
						</div>
					</div>
				</div>
				<div class="priceZong">
					<div class="topPric">${{ money }}</div>
					<div class="urchase f f-a-c f-j-b">
						<div class="lef">{{ piceArt }}</div>
						<div class="rig">{{ article }}</div>
					</div>
				</div>
				<div @click="goPay" class="btn hand">Continue ({{ money }})</div>
				<div style="width: 100%; height: 80px"></div>
			</div>
		</el-drawer>
		<userModule @initObj="initObj" @initGigs="initGigs" ref="addRef" />
		<upLoad @reportObj="reportObj" ref="upLoads" />
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ElMessage, dayjs } from "element-plus";
	import { ref, onMounted, watch } from "vue";
	import { getTimes, copy, formatTimestamp } from "@/utils/setting.js";
	import {
		GetArticleInfo,
		CancelCollectionArtic,
		ArticleReviewList,
		RecommendeArticle,
		createOrdersLink,
		ReportArticles,
		PostArticleReview,
		ArticleReviewLike,
		createOrders,
		ClubPays
	} from "@/api/knowClub/index.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import { useRoute } from "vue-router";
	import router from "@/router/index.js";
	import userModule from "../userModule.vue";
	import upLoad from "../upLoad.vue";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let ind = localStorage.getItem("ind");
	let ind1 = ref(1);
	let ind2 = ref(0);
	let value = ref("");
	let piceArt = ref("One-time purchase");
	let article = ref("1 article");
	let money = ref(0);
	let objs = ref({});
	let obj = ref({});
	let upLoads = ref("");
	let addRef = ref("");
	let drawer = ref(false);
	let drawers = ref(false);
	let route = useRoute();
	let pageNum = ref(1);
	let pageSize = ref(10);
	let ind1s = ref(1);
	let viewTolal = ref(0);
	let viewList = ref([]);
	let recommenList = ref([]);
	let id = route.query.id;
	onMounted(async () => {
		await initObjs();
		await recommendArticle();
		await reviewList();
		window.addEventListener("scroll", handleScroll);
	});
	watch(route, (to, from) => {
		router.go(0);
	});
	// 创建订单
	const goPay = async () => {
		if (ind1.value == 1) {
			// 代表支付一篇文章
			let n = await createOrders({
				type: 2,
				foreignId: id
			});
			if (n.code == 200) {
				// 调用支付接口
				goPayment(n.data);
			}
		} else {
			console.log(ind1s.value, "8989898989898998");
			if (ind1s.value == 1) {
				// 代表一个月
				let n = await ClubPays({
					clubId: obj.value.kcClubArticleAllRespVO.clubId,
					months: 1,
					successUrl: "http://www.xpertbay.com/BuyMyClub?num=1",
					cancelUrl: "http://www.xpertbay.com/BuyMyClub?num=1"
				});
				window.open(n.data);
				// obj.kcClubPriceRespVO.discountMonths
			} else {
				// 代表多个月
				let n = await ClubPays({
					clubId: obj.value.kcClubArticleAllRespVO.clubId,
					months: obj.value.kcClubPriceRespVO.discountMonths,
					successUrl: "http://www.xpertbay.com/BuyMyClub?num=1",
					cancelUrl: "http://www.xpertbay.com/BuyMyClub?num=1"
				});
				window.open(n.data);
			}
		}
		// router.push({
		// 	path: "/BuyOrderPayment"
		// });
	};
	// 跳转去支付
	const goPayment = async orderid => {
		let n = await createOrdersLink({
			orderId: orderid,
			successUrl: "http://www.xpertbay.com/BuyMyClub?num=2",
			cancelUrl: "http://www.xpertbay.com/BuyMyClub?num=2"
		});
		if (n.code == 200) {
			window.open(n.data);
		}
	};
	const indsQie = num => {
		ind1s.value = num;
		if (ind1.value == 2) {
			ind2.value = num;
		}
		if (num == 2) {
			ind1s.value = num;
			if (obj.value.kcClubPriceRespVO) {
				piceArt.value = obj.value.kcClubPriceRespVO.discountMonths + "-month plan";
				article.value = obj.value.kcClubPriceRespVO.discountMonths + "-month club";
				money.value = obj.value.kcClubPriceRespVO.discount;
			}
		} else {
			piceArt.value = "1-month plan";
			if (obj.value.kcClubPriceRespVO) {
				article.value = "1-month club";
				money.value = obj.value.kcClubPriceRespVO.subscription;
			}
		}
	};
	const indQie = num => {
		console.log(num, "5555");
		ind1.value = num;
		if (num == 2) {
			ind2.value = 1;
			piceArt.value = "1-month plan";
			if (obj.value.kcClubPriceRespVO) {
				article.value = "1-month club";
				money.value = obj.value.kcClubPriceRespVO.subscription;
			}
		} else {
			ind2.value = 0;
			piceArt.value = "One-time purchase";
			if (obj.value.kcClubPriceRespVO) {
				article.value = "1 article";
				money.value = obj.value.kcClubArticleAllRespVO.price;
			}
		}
	};
	// 推荐文章
	const recommendArticle = async () => {
		let n = await RecommendeArticle({
			id: obj.value.kcClubArticleAllRespVO.id
		});
		recommenList.value = n.data;
	};
	// 点击发布评论
	const postArticleReview = async () => {
		if (!value.value.trim()) {
			return ElMessage.warning("请输入内容");
		}
		let n = await PostArticleReview({
			articleId: obj.value.kcClubArticleAllRespVO.id,
			content: value.value
		});
		if (n.code == 200) {
			ElMessage.success(n.msg);
			pageNum.value = 1;
			value.value = "";
			reviewList();
		}
	};
	// 点击评论点赞
	const articleReviewLike = async item => {
		let n = await ArticleReviewLike({
			id: item.id
		});
		if (n.code == 200) {
			pageNum.value = 1;
			reviewList();
		}
	};
	// 获取评论列表
	const reviewList = async () => {
		let n = await ArticleReviewList({
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			articleId: obj.value.kcClubArticleAllRespVO.id
		});
		viewTolal.value = n.data.total;
		viewList.value = n.data.list;
	};
	// ============================================== ==============================================
	const report = () => {
		upLoads.value.upLoadVisible = true;
	};
	// 举报文章请求
	const reportObj = async objs => {
		let n = await ReportArticles({
			reportUserIdentity: ind == 3 || ind == 6 ? "1" : "2",
			foreignId: obj.value.kcClubArticleAllRespVO.id,
			reportContent: objs.content,
			reportImages: objs.imgList
		});
		if (n.code == 200) {
			ElMessage.success(n.msg);
		}
		upLoads.value.upLoadVisible = false;
	};
	// 点击收藏
	const ficle = async item => {
		console.log(item, "99999999999");
		addRef.value.type = 2;
		// 执行获取列表
		await addRef.value.initList();
		addRef.value.clubId = item.id;
		addRef.value.dialogTableVisible = true;
	};
	// 点击取消收藏文章
	const cancelCollection = async item => {
		let n = await CancelCollectionArtic({
			articleId: item.id
		});
		if (n.code == 200) {
			// 更新
			initObjs();
		}
	};
	const initGigs = () => {
		// 更新
		initObjs();
	};
	const initObj = () => {
		// 更新
		initObjs();
	};
	// 获取gigs
	const gigsListFn = async () => {
		let n = await ListBySeller({ userId: userId.value });
		port.gigsList = n.data;
		// port.sectList = n.data;
		port.gigsList.forEach(element => {
			element.stupShow = false;
		});
	};
	// 点击分享
	const copyLoca = () => {
		const text = window.location.href;
		copy(text);
	};
	// ============================================================================================
	// 这个是分页
	const currentChange = e => {};
	const initObjs = async () => {
		let n = await GetArticleInfo({
			articleId: id
		});
		obj.value = n.data;
		money.value = obj.value.kcClubArticleAllRespVO.price;
		console.log(obj.value, "22222222222");
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const dwonItem = async item => {
		// drawer.value = true;
		router.replace({
			path: "/ClubDetils",
			query: {
				id: item.id
			},
			forceRefresh: true
		});
		// window.location.reload();
	};
	const dwonItems = async item => {
		drawer.value = true;
		// router.replace({
		// 	path: "/ClubDetils",
		// 	query: {
		// 		id: item.id
		// 	},
		// 	forceRefresh: true
		// });
		// window.location.reload();
	};
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 10) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
